<template>
  <div id="collection">
    <el-container class="collection-page">
      <el-aside width="280px" class="collection-list-box">
        <div class="collection-items">
          <!-- 图标 + 文件 -->
          <div class="collection-item" @click="filterCollection('file')">
            <i class="el-icon-document" :class="iconChange ? 'changeicon' : ''"></i>
            <span class="label">文件</span>
          </div>
          <!-- 图标 + 图片 -->
          <div class="collection-item" @click="filterCollection('image')">
            <i class="el-icon-picture-outline" :class="iconChangeimg ? 'changeicon' : ''"></i>

            <span class="label">图片</span>
          </div>
        </div>
      </el-aside>

      <!-- 主体内容 el-main -->
      <el-main class="collection-box">
        <div class="collection-header">收藏</div>
        <div class="collection-detail">
          <el-row :gutter="20">
            <el-col :span="24" v-for="(item, index) in filteredCollection" :key="index">
              <div class="collection-item">
                <el-icon :name="item.icon" class="icon"></el-icon>
                <div class="collection-info">
                  <div class="title">{{ item.title }}</div>
                  <div class="chat-info">
                    <span class="user-name">{{ item.userName }}</span> |
                    <span class="chat-name">{{ item.chatName }}</span>
                  </div>
                  <div class="time-and-size">
                    <span class="time">{{ item.time }}</span>
                    <span class="size">{{ item.size }}</span>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'collectionView',
  data () {
    return {
      iconChangeimg: false,
      iconChange: true,
      // 所有收藏数据
      collectionData: [
        {
          icon: 'el-icon-document',
          title: '文件1.pdf',
          userName: '用户A',
          chatName: '聊天1',
          time: '2024-12-20 14:32',
          size: '2 MB',
          type: 'file'
        },
        {
          icon: 'el-icon-picture',
          title: '图片1.jpg',
          userName: '用户B',
          chatName: '聊天2',
          time: '2024-12-19 16:45',
          size: '1.5 MB',
          type: 'image'
        },
        {
          icon: 'el-icon-document',
          title: '文件2.docx',
          userName: '用户C',
          chatName: '聊天3',
          time: '2024-12-18 09:20',
          size: '3 MB',
          type: 'file'
        }
      ],
      // 当前筛选的收藏项
      filteredCollection: []
    };
  },
  created () {
    // 默认显示所有收藏项
    // this.filteredCollection = this.filterCollection('file');
    this.filterCollection('file'); // 默认显示文件类型
  },
  methods: {
    // 筛选功能，按文件类型过滤
    filterCollection (type) {
      if (type === 'file') {
        this.filteredCollection = this.collectionData.filter(item => item.type === 'file');
        this.iconChange = true
        this.iconChangeimg = false

      } else if (type === 'image') {
        this.filteredCollection = this.collectionData.filter(item => item.type === 'image');
        this.iconChangeimg = true
        this.iconChange = false

      } else {
        this.filteredCollection = this.collectionData; // 显示所有
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.collection-list-box {
  background-color: #f4f7fc;
  // padding: 20px;
  border-right: 1px solid #e4e7ed;
}

.el-main {
  padding: 0;
}

.collection-header {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #333;
}

.collection-items {
  margin-top: 10px;
}

.collection-item {
  display: flex;
  align-items: center;
  padding: 10px;
  cursor: pointer;
  border-bottom: 1px solid #e4e7ed;

  i {
    padding: 0 15px;
  }

  .changeicon {
    color: #5cb7ff;
  }
}

.icon {
  font-size: 24px;
  margin-right: 10px;
}

.label {
  font-size: 16px;
}

.collection-detail {
  padding: 0 20px;
}

.collection-item {
  display: flex;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #e4e7ed;
}

.icon {
  font-size: 32px;
  margin-right: 15px;
}

.collection-info {
  flex-grow: 1;
}

.title {
  font-size: 16px;
  font-weight: 600;
}

.chat-info {
  font-size: 14px;
  color: #999;
}

.time-and-size {
  font-size: 12px;
  color: #666;
  display: flex;
  justify-content: space-between;
}

.time {
  margin-right: 10px;
}

.size {
  margin-left: 10px;
}

#collection {
  width: 100%;
}

::v-deep .el-scrollbar__wrap {
  overflow: scroll;
  height: 100%;
}

.collection-page {
  height: 100%;

  .collection-list-box {
    display: flex;
    flex-direction: column;
    border-right: #53a0e79c solid 1px;
    background: white;
    width: 3rem;
  }

  .collection-box {
    display: flex;
    flex-direction: column;

    .collection-header {
      padding: 3px;
      height: 60px;
      line-height: 60px;
      font-size: 20px;
      font-weight: 600;
      text-align: center;
      background-color: white;
      border-bottom: 1px #ddd solid;
    }



  }
}
</style>